import React, { Component } from 'react'
import Luo from "iscroll-luo"
import axios from "axios"
class Video extends Component {
  state = {
    arr:[],
    flag:"",// 这个变量用于判断是上拉还是下拉
  }
  componentDidMount(){
     this.getList()
  }
  getList(){
    axios.get("/list1").then(res=>{
      if (this.state.flag == "xiala") {
        this.setState({
          arr:res.data.list
        })
      } else if (this.state.flag == "shangla") {
           this.setState({
             arr:[...this.state.arr,...res.data.list]
           })
      } else {
        this.setState({
          arr:res.data.list
        })
      }
     
    })
  }
  ondown(){ // 下拉刷新得方法
    this.setState({
      flag:"xiala"
    })
    this.getList()
  }
  onup(){ // 上拉加载
    this.setState({
      flag:"shangla"
    })
    this.getList()
  }
  render() {
    return (
      // luo外面包的盒子一定要有宽高
      <div className='video-wrap'>
         <Luo onDown={this.ondown.bind(this)} onUp={this.onup.bind(this)}>
            {
              this.state.arr&&this.state.arr.length? this.state.arr.map((item,index)=>{
                return <div key={index}>
                  <span>{item.title}</span>
                  <img src={item.img} alt="" />
                </div>
              }):"暂无数据"
            }
         </Luo>
      </div>
    )
  }
}

export default Video